import React, { Component } from 'react'
import qs from 'querystring'

export default class Detail extends Component {
  // 方式一，路由参数接收
  // render() {
  //   console.log('props-->', this.props)
  //   const { id, title, con } = this.props.match.params
  //   return (
  //     <div>
  //       <p>id：{id}</p>
  //       <p>名称: {title}</p>
  //       <p>内容为：{con}</p>
  //     </div>
  //   )
  // }

  // 方式二，路由参数接收
  // render() {
  //   console.log('props-->', this.props)
  //   const { search } = this.props.location
  //   const { id, title, con } = qs.parse(search.slice(1))
  //   return (
  //     <div>
  //       <p>id：{id}</p>
  //       <p>名称: {title}</p>
  //       <p>内容为：{con}</p>
  //     </div>
  //   )
  // }

  // 方式三，接收参数
  render() {
    console.log('props-->', this.props)
    const { id, title, con } = this.props.location.state
    return (
      <div>
        <p>id：{id}</p>
        <p>名称: {title}</p>
        <p>内容为：{con}</p>
      </div>
    )
  }
}
